<template>
    <div class="silk-road-hot-data">
        <div class="silk-road-hot-data--top">
            <div @click="changeData('news')">
                新闻资讯
                <span :class="{'active': active === 'news'}"></span>
            </div>
            <div @click="changeData('hot')">
                时事热点
                <span :class="{'active': active === 'hot'}"></span>
            </div>
        </div>
        <div class="silk-road-hot-data--main">
            <SilkRoadHotDataCard v-for="(item, index) in silkRoadHotArr" :card-data="item" :key="index" />
        </div>
        <div class="silk-road-hot-data--bottom" @click="viewMore(active)">
            +查看更多
        </div>
    </div>
</template>

<script>
    import SilkRoadHotDataCard from "./SilkRoadHotDataCard";
    export default {
        name: "SilkRoadHotData",
        components: {SilkRoadHotDataCard},
        props: {
            // 国家
            silkRoadCountry: {
                type: String,
                required: true,
                default: "all"
            },
            // 领域
            silkRoadDomain: {
                type: String,
                required: false,
                default: "all"
            }
        },
        data() {
            return {
                silkRoadHotArr: [],
                active: 'news'
            }
        },
        beforeMount() {
            setTimeout(() => {
                this.silkRoadHotArr = [
                    {
                        id: 0,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 1,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 2,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 3,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 4,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 5,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 6,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 7,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月18日，该协会发起一项集体行动列举出脸书违",
                        domain: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                    {
                        id: 8,
                        title: "法国协会向“脸书”发通牒，要求改",
                        content: "11月11日，该协会发起一项集体行动列举出脸书违",
                        field: "政治",
                        country: "越南",
                        time: "2018年10月15日"
                    },
                ]
            }, 1000)
        },
        mounted(){
            
        },
        methods: {
            changeData(str) {
                this.active = str;
                setTimeout(() => {
                    this.silkRoadHotArr = this.silkRoadHotArr.reverse()
                })
            },
            viewMore(name) {
                console.log(name)
            }
        },
        watch:{
            silkRoadCountry:function(val){
                console.log(this.silkRoadCountry)
            }
            
        }
    }
</script>

<style lang="scss" scoped>
    .silk-road-hot-data {
        .silk-road-hot-data--top {
            display: flex;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            div {
                position: relative;
                width: 40%;
                span {
                    position: absolute;
                    display: none;
                    left: 25%;
                    bottom: 0;
                    width: 50%;
                    height: 5px;
                    background: #99f;
                }
                span.active {
                    display: block;
                }
            }
        }
        .silk-road-hot-data--bottom {
            text-align: center;
        }
    }
</style>
